<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>renren-aui</title>
  <link rel="stylesheet" href="../../aui/plugins/ionicons-4.3.0/css/ionicons.min.css">
  <link rel="stylesheet" href="../../aui/css/element-theme/index.css">
  <link rel="stylesheet" href="../../aui/css/aui.css">
</head>
<body>
  <div v-cloak class="aui-wrapper aui-page__form-basic">
    <div class="aui-content__wrapper">
      <main class="aui-content">
        <el-card shadow="never" class="aui-card--fill">
          <el-form class="basic-form" :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmitHandle()" label-width="100px">
            <el-form-item label="标题：" prop="title">
              <el-input v-model="dataForm.title" placeholder="给目标起个名字"></el-input>
            </el-form-item>
            <el-form-item label="起止日期：" prop="date">
              <el-date-picker
                v-model="dataForm.date"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                style="width: 100%;">
              </el-date-picker>
            </el-form-item>
            <el-form-item label="目标描述：" prop="goal">
              <el-input type="textarea" v-model="dataForm.goal" placeholder="请输入你的阶段性工作目标"></el-input>
            </el-form-item>
            <el-form-item label="衡量标准：" prop="standard">
              <el-input type="textarea" v-model="dataForm.standard" placeholder="请输入衡量标准"></el-input>
            </el-form-item>
            <el-form-item label="客户：" prop="client">
              <template slot="label">
                <el-tooltip class="item" effect="dark" content="目标的服务器对象" placement="top">
                  <i class="aui-form__label-icon icon ion-ios-information-circle-outline"></i>
                </el-tooltip>
                <span>客户：</span>
              </template>
              <el-input v-model="dataForm.client" placeholder="请描述你服务的客户，内部客户直接 @姓名／工号"></el-input>
            </el-form-item>
            <el-form-item label="邀评人：" prop="invites">
              <el-input v-model="dataForm.invites" placeholder="请直接 @姓名／工号，最多可邀请 5 人"></el-input>
            </el-form-item>
            <el-form-item label="权重：" prop="weight">
              <el-input-number v-model="dataForm.weight" controls-position="right" :min="0" :max="100" label="权重"></el-input-number>
              <span>%</span>
            </el-form-item>
            <el-form-item label="目标公开：" prop="public">
              <el-radio-group v-model="dataForm.public">
                <el-radio :label="1">公开</el-radio>
                <el-radio :label="2">部分公开</el-radio>
                <el-radio :label="3">不公开</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="dataFormSubmitHandle()">提交</el-button>
              <el-button @click="dataFormResetHandle()">重置</el-button>
            </el-form-item>
          </el-form>
        </el-card>
      </main>
    </div>
  </div>
  <script src="../../aui/plugins/vue-2.5.17/vue.js"></script>
  <script src="../../aui/plugins/element-2.4.5/index.js"></script>
  <script src="../../aui/plugins/axios-0.18.0/axios.min.js"></script>
  <script>
    (function () {
      var vm = window.vm = new Vue({
        el: '.aui-wrapper',
        data: function () {
          return {
            dataForm: {
              title: '',
              date: null,
              goal: '',
              standard: '',
              client: '',
              invites: '',
              weight: 0,
              public: 1
            },
            dataRule: {
              title: [
                { required: true, message: '必填项不能为空', trigger: 'blur' }
              ],
              date: [
                { required: true, message: '必填项不能为空', trigger: 'change' }
              ],
              goal: [
                { required: true, message: '必填项不能为空', trigger: 'blur' }
              ],
              standard: [
                { required: true, message: '必填项不能为空', trigger: 'blur' }
              ]
            }
          }
        },
        beforeCreate () {
          vm = this;
        },
        methods: {
          // 表单提交
          dataFormSubmitHandle: function () {
            vm.$refs['dataForm'].validate(function (valid) {
              if (valid) {
                window.parent.vm.$message({
                  message: '操作成功',
                  type: 'success',
                  duration: 1500,
                  onClose: function () {
                    console.log(vm.dataForm);
                  }
                });
              }
            });
          },
          // 表单重置
          dataFormResetHandle: function () {
            vm.$refs['dataForm'].resetFields();
          }
        }
      });
    })();
  </script>
</body>
</html>